<template>
  <div class="header">
    <div class="collapse-div">
      <i :class="getCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
         @click="changeCollapse"
      >
      </i>
    </div>
    <div class="logo-div">
      <h1>后台管理系统</h1>
    </div>
    <div class="menu-div">
      <!--      <el-color-picker v-model="colorPick"></el-color-picker>-->
      <div @click="handleFullScreen" class="full-screen-div">
        <i class="el-icon-rank"></i>
      </div>
      <el-dropdown placement="bottom" trigger="click">
        <el-badge class="mark" value="12">
          <i class="el-icon-bell"></i>
        </el-badge>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>信息1</el-dropdown-item>
          <el-dropdown-item>信息2</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="user-avatar">
        <el-avatar :size="30" :src="user.avatarUrl" class="avatar-clz"></el-avatar>
      </div>
      <div class="user-info">
        <el-dropdown @command="handleCommand" trigger="hover">
          <span>
            admin
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="git">仓库地址</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
	import {mapActions, mapGetters} from 'vuex'

	export default {
		data() {
			return {
				logoUrl: 'https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png',
				user: {
					username: '',
					avatarUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
				},
				collapse: false,
				colorPick: '#409EFF',
				visible: false,
				fullscreen: false
			}
		},
		computed: {
			...mapGetters('settings', ['getCollapse']),
			...mapGetters('user', ['getUserInfo'])
		},
		methods: {
			...mapActions('settings', ['changeCollapse']),
			...mapGetters('user', ['setUserInfo']),
			handleCommand(command) {
				switch (command) {
					case 'git':
						this.$message('git')
						break
					case 'logout':
						this.logout()
						break
				}
			},
			logout() {
				this.$router.push({name: 'login'})
			},
			handleFullScreen() {
				let element = document.documentElement
				if (this.fullscreen) {
					document.exitFullscreen()
				} else {
					element.requestFullscreen()
				}
				this.fullscreen = !this.fullscreen
			}
		}
	}

</script>
<style lang="scss" scoped>
  @import "./src/style/mixin";

  .header {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;

    .collapse-div {
      flex: 1;

      @include icon(30px, #ffffff)
    }

    .logo-div {
      flex: 3;

      h1 {
        color: #FFF;
        margin: 0;
      }
    }

    .menu-div {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;

      @include icon(30px, #ffffff);

      .full-screen-div {
        i {
          transform: rotate(45deg);
        }
      }

      .user-info {
        div {
          color: #ffffff;
        }
      }
    }
  }
</style>
